<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>n当前值为:{{n}}</h2>
        <button @click="nPlus">点我n+1</button>
        <button @click="destroyVM">点我销毁vm</button>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示

        const vm = new Vue({
            el:'#root',
            //template:模板，body里面写一个div根节点，手动挂载后会解析template里面的内容到根节点
/*            template:'<h2>n当前值为:{{n}}</h2>' +
                    '<button @click="n++">点我n+1</button>',*/  //多行时使用''会报错，需要``
/*            template:`
                      <div>
                          <h2>n当前值为:{{n}}</h2>
                          <button @click="nPlus">点我n+1</button>
                          <button @click="destroyVM">点我销毁vm</button>
                      </div>
                    `,*/  /*使用template时得包一个div  不然解析时会报错:不允许出现两个根节点*/
            data:{
                n:1
            },
            methods:{
                nPlus(){
                    console.log("nPlus")
                    this.n++
                },
                destroyVM(){
                    console.log("Bye!")
                    this.$destroy()
                }
            },
            beforeCreate(){
                console.log("beforeCreate...")
                console.log(this)
                // debugger;
            },
            created(){
                console.log("created...")
                console.log(this)
                // debugger;
            },
            beforeMount(){
                console.log("beforeMount...")
                console.log(this)
                // debugger;
            },
            mounted(){
                console.log("mounted...")
                console.log(this)
                // debugger;
            },
            beforeUpdate(){
                console.log("beforeUpdate...")
                console.log(this)
                // debugger;
            },
            updated(){
                console.log("updated...")
                console.log(this)
                // debugger;
            },
            beforeDestroy(){
                console.log("beforeDestroy...")
                console.log(this)
                this.nPlus() //此时在销毁前 vm实例中的元素暂时处于可用状态
                // debugger;
            },
            destroyed(){
                console.log("destroy")
                console.log(this)
            }
        })
        vm.$mount('#root') //手动挂载
    </script>
</body>
</html>